<template>
  <tr class="agent-tr">
    <td class="agent">{{one.agentName}}</td>
    <td>{{one.agentNo}}</td>
    <td>{{filterVersion(one.version)}}</td>
    <td>{{one.answerStyle}}</td>
    <td class="cdr-status" :class="one.state ? one.state.color : ''">{{one.state ? one.state.content: ''}}</td>
    <td v-for="(item, index) in monitorHeader" v-show="item.show === true" :key="index">
      <template v-if="item.name.indexOf('Time') !== -1">{{one[item.name]|timeDown}}</template>
      <template v-else-if="item.name=== 'stateSwitch'">
        {{$t('monitor.busy')}}：{{one['busyNum']}}<br>
        {{$t('monitor.rest')}}：{{one['vacaNum']}}
      </template>
      <template v-else-if="item.name=== 'dialoutCount'">
        {{$t('public.sum')}}：{{one['outCalls']}}<br>
        {{$t('monitor.calloutSuc')}}：{{one['dealingSuccessCount']}}
      </template>
      <template v-else-if="item.name=== 'answerCount'">
        {{$t('monitor.callSuc')}}：{{one['answerCount'] || 0}}<br>
        {{$t('monitor.callFail')}}：{{one['inCalls'] - one['answerCount'] || 0}}
      </template>
      <template  v-else-if="item.name === 'sensitiveWord'">
        <el-popover trigger="hover" placement="top">
            <p style="text-align:left" v-html='one[item.name]'></p>
            <div slot="reference" class="name-wrapper">
              <p size="medium" style='color:#2878FF;width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;' v-show="one['sensitiveAgent']">座席：{{one['sensitiveAgent']}}</p>
              <p size="medium" style='color:#2878FF;width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;' v-show="one['sensitiveCustomer']">客户：{{one['sensitiveCustomer']}}</p>
            </div>
          </el-popover>
      </template>  
      <template v-else>{{one[item.name]}}</template>
    </td>
    <td class="operate">
      <el-tooltip
        placement="left"
        effect="light"
        style="padding: 16px 0;"
        popper-class="monitor-agent-tooltip"
        :visible-arrow="false"
      >
        <el-button type="text" size="small" icon="el-icon-more"></el-button>
        <div slot="content">
          <el-button size="mini" type="text" @click="ctiUiListen(one.operate)" class="listen" :disabled="one.operate.buttonState.listen.disabled" v-show="one.operate.buttonState.listen.show">{{$t('monitor.monitor')}}</el-button>
          <el-button size="mini" type="text" @click="ctiUiEndListen(one.operate)" class="endListen"  v-show="!one.operate.buttonState.listen.show">{{$t('monitor.endMonitor')}}</el-button> <br>
          <el-button size="mini" type="text" @click="ctiUiForceHangup(one.operate)" class="forceHangup" :disabled="one.operate.buttonState.forceHangup.disabled" v-show="one.operate.buttonState.forceHangup.show">{{$t('monitor.demolitions')}}</el-button>  <br>
          <el-button size="mini" type="text" @click="ctiUiLoot(one.operate)" class="loot" :disabled="one.operate.buttonState.loot.disabled" v-show="one.operate.buttonState.loot.show">{{$t('monitor.pickUp')}}</el-button>  <br>
          <el-button size="mini" type="text" @click="ctiUiKick(one.operate)" class="kick" :disabled="one.operate.buttonState.kick.disabled" v-show="one.operate.buttonState.kick.show">{{$t('monitor.checkOut')}}</el-button>  <br>
          <el-button size="mini" type="text" @click="ctiUiPick(one.operate)" class="pick" :disabled="one.operate.buttonState.pick.disabled" v-show="one.operate.buttonState.pick.show">{{$t('monitor.checkInPhone')}}</el-button>  <br>
          <el-button size="mini" type="text" @click="ctiUiPick(one.operate, 'gateway')" class="pickGateway" :disabled="one.operate.buttonState.pickGateway.disabled" v-show="one.operate.buttonState.pickGateway.show">{{$t('monitor.checkInSIP')}}</el-button>  <br>
          <el-button size="mini" type="text" class="change-status-wrap" :class="one.operate.buttonState.changeState.disabled ? '' : 'no-diabled'" :disabled="one.operate.buttonState.changeState.disabled">
            {{$t('monitor.changeUserStatus')}} > 
            <div class="change-status-box-wrap">
              <ul class="change-status-box">
                <li v-for="status in phoneBarStauts" v-show="one.state && one.state.state !== status.key" :key="status.key" @click.stop="ctiChangeUserStatus(one, status.key)">{{status.value}}</li>
              </ul>
            </div>
            </el-button>  <br>
        </div>
      </el-tooltip>
    </td>
  </tr>
</template>
<script>
  import {showCountDown} from '@/utils/workflowUtils.js'
    import { m7Language } from '@/utils/m7Utils'
  export default {
    name: 'monitor',
    data () {
      return {
        activeName: 'table'
      }
    },
    props: {
      one: {type: Object, default: function () { return {} }},
      monitorHeader: {type: Array, default: function () { return [] }}
    },
    filters: {
      timeDown (value) {
        if (value || value === 0) {
          return showCountDown(value)
        }
        return ''
      }
    },
    methods: {
      ctiUiListen (data) {
        this.$emit('ctiUiListen', data)
      },
      ctiUiEndListen (data) {
        this.$emit('ctiUiEndListen', data)
      },
      ctiUiForceHangup (data) {
        this.$emit('ctiUiForceHangup', data)
      },
      ctiUiLoot (data) {
        this.$emit('ctiUiLoot', data)
      },
      ctiUiKick (data) {
        this.$emit('ctiUiKick', data)
      },
      ctiUiPick (data, type) {
        this.$emit('ctiUiPick', data, type)
      },
      filterVersion (type) {
        let typeName = ''
        let Packages = this.$getCache('licenceType')
        Packages.forEach((item)=>{
          if (type === item.code_value) {
            typeName = item.code_name
          }
        })
        return typeName
      },
      ctiChangeUserStatus (peer, status) {
        let isBusy = true
        if (status === '0') {
          isBusy = false
        }
        let data = {
          isBusy: isBusy,
          busyType: status,
          userId: peer.userId
        }
        this.$store.dispatch('phoneSetBusy', data).then(res => {
          if (res && res.Succeed) {
            this.$message.success(this.$t('monitor.changeStatusSuccess'))
          } else {
            this.$message.error(this.$t('monitor.changeStatusFail'))
          }
        }).catch(err => {
          this.$message.error(this.$t('monitor.changeStatusFail'))
        })
      }
    },
    computed: {
      phoneBarStauts () { // 电话条状态 eg: 空闲、小休
        let busyTypeName = this.$store.state.cti.globalLet.busyTypeName
        let phoneBarStatus = []
        for (let key in busyTypeName) {
          if (key !== '99') {
            let m7Value = m7Language('globalChineseKey.' + busyTypeName[key], null, true) || busyTypeName[key]
            let tempPhoneBarStatus = {key: key, value: m7Value}
            phoneBarStatus.push(tempPhoneBarStatus)
          }
        }
        return phoneBarStatus
      },
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl';
  .agent-tr
    display table
    width 100%
    table-layout fixed
  td
    word-break break-all
  .agent
    max-width 120px
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .button-group
    display none
    position: absolute
    top: -20px
    right 35px
    z-index 1
    background-color $cf-white
    text-align center
    padding 0 10px
    border 1px solid #eee
  .operate
    position relative
    &:hover
      .button-group
        display: block
  td.cdr-green
    color $c-main
    &:before
      width 0
  td.cdr-red
    color #ff6c65
    &:before
      width 0
  td.cdr-orange
    color $cf-color0
    &:before
      width 0
  .change-status-wrap
    position relative
    .change-status-box-wrap
      position absolute
      left 68px
      bottom -12px
      display none
      padding-left 30px
      .change-status-box
        border 1px solid #eee
        border-radius 2px
        background #fff
        li
          padding 10px 20px
          display block
          &:hover
            background #ccc
  .change-status-wrap.no-diabled&:hover
    .change-status-box-wrap 
      display block
  .monitor-agent-tooltip
  >>>.el-button 
      padding-left 10px
      padding-right 10px
</style>
